<template>
  <div style="margin-top: 20px;">
    <el-row :gutter="15">
      <el-form
        ref="searchForm"
        :model="searchData"
        size="medium"
        label-width="100px"
      >
        <el-col :span="8">
          <el-form-item label="项目名称" prop="projectName">
            <el-input
              v-model="searchData.projectName"
              placeholder="请输入项目名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="专项检查" prop="seq">
            <el-select
              v-model="searchData.seq"
              placeholder="请选择专项检查"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in seqOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" icon="el-icon-search" @click="search"
              >查询</el-button
            >
            <el-button type="primary" icon="el-icon-plus" @click="open"
              >新增</el-button
            >
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-table
      :data="process"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="id" prop="id" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" prop="projectName" align="center">
        <template slot-scope="{ row }">
          <span>
            <a>{{ row.projectName }}</a>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="类别" prop="seq" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.seq | showKind }}</span>
        </template>
      </el-table-column>

      <el-table-column label="收费金融" prop="fee" align="center" width="100">
        <template slot-scope="{ row }">
          <span>￥{{ new Number(row.fee).toFixed(2) }}元</span>
        </template>
      </el-table-column>

      <el-table-column label="启用" prop="available" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.available ? "启用" : "停用" }}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注" prop="remark" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.remark }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="创建人"
        prop="createBy"
        align="center"
        width="100"
      >
        <template slot-scope="{ row }">
          <span>{{ row.createBy }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="修改人"
        prop="lastUpdateBy"
        align="center"
        width="100"
      >
        <template slot-scope="{ row }">
          <span>{{ row.lastUpdateBy }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" prop="id" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" @click="edit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-size="searchData.pageSize"
      layout="prev, pager, next"
      :total="searchData.totalCount"
      @prev-click="search(-1)"
      @next-click="search(1)"
    ></el-pagination>

    <el-dialog
      :visible.sync="dialogEditVisible"
      @open="onOpen"
      @close="onClose"
      :title="dialogEditTitile"
    >
      <el-form
        ref="editForm"
        :model="editData"
        :rules="editRules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="项目名称" prop="projectId">
          <el-select
            v-model="editData.projectId"
            placeholder="请选择项目名称"
            clearable
            :style="{ width: '100%' }"
            filterable
            remote
            reserve-keyword
            :remote-method="remoteMethod"
            :loading="loading"
            @change="selectModel($event)"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="seq">
          <el-select
            v-model="editData.seq"
            placeholder="请选择类型"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in seqOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收费金额" prop="fee" required>
          <el-input-number v-model="editData.fee" :precision="2" :step="0.1" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="启用" prop="available" required>
          <el-switch v-model="editData.available"></el-switch>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="editData.remark"
            placeholder="请输入备注"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  processList,
  getProjects,
  addProcess,
  editProcess,
} from "@/api/treatProcess";

export default {
  components: {},
  props: [],
  data() {
    return {
      dialogEditVisible: false,
      dialogEditTitile: "添加新流程",
      searchData: {
        projectName: "",
        seq: "",
        fee: 0,
        page: 0,
        totalCount: 0,
        totalPage: 1,
        pageSize: 20,
      },
      seqOptions: [
        {
          label: "预检",
          value: 1,
        },
        {
          label: "病历",
          value: 2,
        },
        {
          label: "专项检查",
          value: 3,
        },
        {
          label: "处方",
          value: 4,
        },
      ],
      loading: false,
      projectOptions: [],
      process: [],
      editData: {
        projectName: "",
        projectId: "",
        seq: "",
        fee: 0,
        available: true,
        remark: "",
      },
      editRules: {
        projectName: [
          {
            required: true,
            message: "请选择项目名称",
            trigger: "change",
          },
        ],
        seq: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
        remark: [],
      },
    };
  },
  filters: {
    showKind: function (v) {
      return app.seqOptions.map(function (a) {
        return a.label;
      })[--v];
    },
  },
  computed: {},
  watch: {},
  beforeCreate: function () {
    window.app = this;
  },
  created() {
    this.search();
  },
  mounted() {},
  methods: {
    edit(row) {
      this.dialogEditTitile = "编辑流程";
      this.dialogEditVisible = true;
      this.editData = row;
      getProjects({}).then((response) => {
        if (response.code === 200) {
          this.projectOptions = response.page.filter(function (item) {
            return item.available;
          });
          console.log(response);
        }
      });
    },
    remoteMethod(query) {
      if (query != null) {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          getProjects({ projectName: query }).then((response) => {
            if (response.code === 200) {
              this.projectOptions = response.page.filter(function (item) {
                return item.available;
              });
              console.log(response);
            }
          });
        }, 200);
      } else {
        this.projectOptions = [];
      }
    },
    search(n) {
      if (typeof n === "number") {
        this.searchData.page = this.searchData.page + n;
      }
      if (this.searchData.seq == "") {
        this.searchData.seq = null
      }

      processList(this.searchData).then((response) => {
        if (response.code === 200) {
          this.process = response.page.list;
          this.searchData.page = response.page.currPage;
          this.searchData.totalPage = response.page.totalPage;
          this.searchData.totalCount = response.page.totalCount;
        }
      });
    },
    resetForm() {
      this.$refs["searchForm"].resetFields();
    },
    open() {
      this.dialogEditVisible = true;
      this.dialogEditTitile = "添加新流程";
      getProjects({}).then((response) => {
        if (response.code === 200) {
          this.projectOptions = response.page.filter(function (item) {
            return item.available;
          });
          console.log(response);
        }
      });
    },
    onOpen() {},
    onClose() {
      this.$refs["editForm"].resetFields();
    },
    close() {
      this.$emit("update:visible", false);
    },
    selectModel(id) {
      let obj = {};
      obj = this.projectOptions.find((item) => {
        //model就是上面的数据源
        return item.id === id; //筛选出匹配数据
      });
      this.editData.projectName = obj.name;
    },
    handelConfirm() {
      this.$refs["editForm"].validate((valid) => {
        if (!valid) return;
        console.log(this.editData);
        if (this.editData.id != null) {
          editProcess(this.editData).then((response) => {
            if (response.code === 200) {
              this.dialogEditVisible = false;
              this.search();
            }
            this.$message({
              showClose: true,
              message: response.msg,
              type: "success",
            });
          });
        } else {
          addProcess(this.editData).then((response) => {
            if (response.code === 200) {
              this.dialogEditVisible = false;
              this.search();
            }
            this.$message({
              showClose: true,
              message: response.msg,
              type: "success",
            });
          });
        }

        this.close();
      });
    },
  },
};
</script>
<style></style>
